'use client'

import { useAccount, useConnect, useDisconnect } from 'wagmi'
import './globals.css'
import MyHeader from './comm/head';
import Footer from './comm/footer';
import Main from './comm/main';
function App() {
  const account = useAccount()
  const { connectors, connect, status, error } = useConnect()
  const { disconnect } = useDisconnect()
  return (
    <div className="bg-gray-50">
      <MyHeader />

      <Main/>

      <Footer />

      <style>{`
        body {
          min-height: 1024px;
        }
        .hero-bg {
          background-image: url('https://ai-public.mastergo.com/ai/img_res/a2f10a3b356cf26da37d98c78f1e3f28.jpg');
          background-size: cover;
          background-position: center;
        }
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
          -webkit-appearance: none;
          margin: 0;
        }
      `}</style>
    </div>
  );
  // return (
  //   <>
  //     <div>
  //       <h2>Account</h2>

  //       <div>
  //         status: {account.status}
  //         <br />
  //         addresses: {JSON.stringify(account.addresses)}
  //         <br />
  //         chainId: {account.chainId}
  //       </div>

  //       {account.status === 'connected' && (
  //         <button type="button" onClick={() => disconnect()}>
  //           Disconnect
  //         </button>
  //       )}
  //     </div>

  //     <div>
  //       <h2>Connect</h2>
  //       {connectors.map((connector) => (
  //         <button
  //           key={connector.uid}
  //           onClick={() => connect({ connector })}
  //           type="button"
  //         >
  //           {connector.name}
  //         </button>
  //       ))}
  //       <div>{status}</div>
  //       <div>{error?.message}</div>
  //     </div>
  //   </>
  // )
}

export default App


